<template>
	<view class="team">
		<navbar title="团队参赛" bgcolor="#6252DF" txcolor="#ffffff"></navbar>

		<view>
			<image class="info-top" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/info-top.png"
				mode="aspectFit"></image>
		</view>

		<view class=" bgwhite mt30">
			<view class="p30">
				<view class="bold fs32">选手报名信息</view>
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">团队名称：</view>
					<view>
						<input class="input" v-model="title" type="text" placeholder="请输入团队名称"
							placeholder-class="fc9e fs26" />
					</view>
				</view>
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">团队人数：</view>
					<!-- 					<w-select
					    style="text-align: left;" 
					    v-model='chooseValue' 
					    :list='range'
					    valueName='value' 
					    keyName="value"
					    @change='change'
					>
					</w-select> -->
					<uni-data-select v-model="players" :localdata="range" @change="change"
						placeholder="下拉选择人数"></uni-data-select>
				</view>
			</view>
			<view class="bor-top"></view>
			<block v-for="(item,tindex) in infoData" :key="tindex">
				<view class="fcenter xuanshou fs30">选手{{ tindex+1 }}</view>
				<view class="acea-row row-middle px30 ">
					<view class="fc222 fs32 name">姓名：</view>
					<view>
						<input class="input" v-model="item.real_name" type="text" placeholder="请输入姓名"
							placeholder-class="fc9e fs26" />
					</view>
				</view>
				<view class="acea-row row-middle mt30 px30 ">
					<view class="fc222 fs32 name">手机号：</view>
					<view>
						<input class="input" v-model="item.phone" maxlength="11" type="number" placeholder="请输入手机号"
							placeholder-class="fc9e fs26" />
					</view>
				</view>
				<view class="acea-row row-middle mt30 px30 ">
					<view class="fc222 fs32 name">身份证号：</view>
					<view>
						<input class="input" v-model="item.id_card" type="text" placeholder="请输入身份证号"
							placeholder-class="fc9e fs26" />
					</view>
				</view>
				<view class="bor-top mt30"></view>
			</block>
			<view class="px30 pb30" v-if="show==1">
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">年龄分组：</view>
					<view class="acea-row row-between-wrapper select" @click="ageopen">
						<view class="fc333 fs26" v-if="agename">{{ agename }}</view>
						<view class="fc9e fs26" v-else>请选择你的年龄</view>
						<view class="iconfont icon-xiangxia2"></view>
					</view>
				</view>
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">专业分组：</view>
					<view class="acea-row row-between-wrapper select" @click="zhuanyeopen">
						<view class="fc333 fs26" v-if="zhuanyename">{{ zhuanyename }}</view>
						<view class="fc9e fs26" v-else>请选择你的专业</view>
						<view class="iconfont icon-xiangxia2"></view>
					</view>
				</view>
			</view>

			<view class="px30 pb30">
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">报名渠道</view>
					<view>
						<input class="input" v-model="source" type="text" placeholder="请输入报名渠道"
							placeholder-class="fc9e fs26" />
					</view>
				</view>
			</view>

			<view class="p30" v-if="show==0">
				<view class="verify acea-row row-middle row-center" @click="verify">点击进行年龄校验</view>
			</view>
		</view>

		<view class="price fcenter">你需支付：{{ players==2 ? two_price : more_price }}元/人</view>

		<view class="paybtn" @click="confirmbtn">点击支付</view>

		<view style="width: 100%;height: 100rpx;"></view>

		<uni-popup type="bottom" ref="ages">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择年龄分组</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="ageclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<block v-for="(item,index) in ageData" :key="index">
					<view class="acea-row row-middle row-center mb30" @click="ageclick(item)">
						{{ item.zuName }}
					</view>
				</block>
			</view>
		</uni-popup>

		<uni-popup type="bottom" ref="zhuanye">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择专业分组</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="zhuanyeclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<block v-for="(item,index) in zhuanyeData" :key="index">
					<view class="acea-row row-middle row-center mb30" @click="zhuanyeclick(item)">
						{{ item.zhuanyeName }}
					</view>
				</block>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		inletConfig,
		baomingCreate
	} from '@/api/api.js'
	import navbar from '../../components/navbar.vue';
	import Wselect from '@/components/w-select/w-select.vue'
	export default {
		components: {
			navbar,
			Wselect
		},
		data() {
			return {
				range: [{
						value: 2,
						text: "2"
					},
					{
						value: 3,
						text: "3"
					},
					{
						value: 4,
						text: "4"
					},
					{
						value: 5,
						text: "5"
					},
					{
						value: 6,
						text: "6"
					},
					{
						value: 7,
						text: "7"
					},
					{
						value: 8,
						text: "8"
					},
					{
						value: 9,
						text: "9"
					},
					{
						value: 10,
						text: "10"
					},
					{
						value: 11,
						text: "11"
					},
					{
						value: 12,
						text: "12"
					},
					{
						value: 13,
						text: "13"
					}, {
						value: 14,
						text: "14"
					}, {
						value: 15,
						text: "15"
					}, {
						value: 16,
						text: "16"
					}, {
						value: 17,
						text: "17"
					}, {
						value: 18,
						text: "18"
					}, {
						value: 19,
						text: "19"
					}, {
						value: 20,
						text: "20"
					},
				],
				ageData: [],
				zhuanyeData: [],
				zhuanyename: '',
				zhuanye_id: '',
				agename: '',
				age_id: '',
				players: 2,
				huodong_id: '',
				two_price: '',
				more_price: '',
				xiangmu_id: '',
				infoData: [{
						real_name: '',
						phone: '',
						id_card: ''
					},
					{
						real_name: '',
						phone: '',
						id_card: ''
					},
				],
				copy: [{
						real_name: '',
						phone: '',
						id_card: ''
					},
					{
						real_name: '',
						phone: '',
						id_card: ''
					},
				],
				source: '',
				title: '',
				agelist: [],
				btnhiddle: false,
				chooseValue: 2,
				show: 0,
			};
		},
		onLoad(option) {
			this.huodong_id = option.huodong_id;
			this.two_price = option.two_price;
			this.more_price = option.more_price;
			this.xiangmu_id = option.xiangmu_id;
			this.is_no_check = option.is_no_check;
			this.show = option.is_no_check;
			this.getconfig();
		},
		watch: {
			players() {
				if (this.players > 2) {
					let str = this.players - 2;
					let list = [];
					let arr = {
						real_name: '',
						phone: '',
						id_card: ''
					}
					for (let i = 0; i < this.players; i++) {
						list.push(Object.assign({}, arr))
					}
					this.infoData = list;
				} else {
					this.infoData = this.copy;
				}
			},
		},
		methods: {
			// change(e){
			// 	this.players = this.chooseValue;
			// },
			//身份证实名认证
			verifyIDcard(idNo, name) {
				let that = this;
				let ocrParams = {
					idNo: idNo,
					name: name
				}
				uni.showLoading({
					title: "校验中"
				})
				uni.request({
					method: 'POST',
					url: 'https://idenauthen.market.alicloudapi.com/idenAuthentication',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						'Authorization': 'APPCODE 190d9fcb115b490db2c01737f98283aa' //APPCODE值 （'APPCODE xxxxxxx'）类似于token的形式
					},
					dataType: 'json',
					data: ocrParams,
					success(res) {
						uni.hideLoading();
						console.log(222222, res.statusCode)
						if( res.statusCode == '403' ) {
							that.$util.Tips({ title: '身份检验繁忙请稍后重试' });
							return;
						} 
						if (res.data.respCode == '0002') return that.$util.Tips({
							title: res.data.respMessage
						});
						if (res.data.respCode == '0000') return that.$util.Tips({
							title: res.data.respMessage
						});
						if (res.data.respCode == '0004') return that.$util.Tips({
							title: res.data.respMessage
						});
						if (res.data.respCode == '0008') return that.$util.Tips({
							title: res.data.respMessage
						});
						let ages = res.data.age;
						that.agelist.push(ages)
						let arr = that.agelist;
						let age = null;
						for (let k = 0; k < arr.length; k++) {
							age += Number(arr[k])
						}
						let average = Number(age / arr.length);
						console.log('average', average);
						let list = that.ageData;
						let str = list.filter((item) => {
							if (average >= item.min_age && average <= item.max_age) {
								return item
							}
						})
						console.log('str', str);
						if (str.length == 0) {
							uni.showModal({
								title: '提示',
								content: '已超过报名平均年龄',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							that.agename = '请选择年龄'
							return false;
						}
						that.agename = str[0].zuName;
						that.age_id = str[0].age_id;
						that.show = 1;
					},
					fail(err) {
						uni.hideLoading();
						console.log('err', err);
					}
				})
			},
			verify() {
				let that = this;
				let list = that.infoData;
				that.agelist = [];
				if (that.btnhiddle) return;
				that.btnhiddle = true;
				for (let i = 0; i < list.length; i++) {
					if (!list[i].real_name) return that.$util.Tips({
						title: `请填写${i+1}号选手的姓名`
					}, () => {
						that.btnhiddle = false;
					});
					if (!list[i].id_card) return that.$util.Tips({
						title: `请填写${i+1}号选手的身份证号码`
					}, () => {
						that.btnhiddle = false;
					});
					if (!/^[1-9]\d{5}(19|20)\d{2}(0\d|1[0-2])([0-2]\d|3[0-1])\d{3}([0-9]|X)$/i.test(list[i].id_card))
						return that.$util.Tips({
							title: that.$t(`请正确填写${i+1}号选手的身份证号码`)
						}, () => {
							that.btnhiddle = false;
						});
					// that.verifyIDcard(list[i].id_card,list[i].real_name)
					let is_join = list.every((item) => {
						if (item.real_name && item.id_card) {
							return true
						} else {
							return false
						}
					})
					console.log('is_join', is_join);
					if (is_join && that.btnhiddle) {
						let ocrParams = {
							idNo: list[i].id_card,
							name: list[i].real_name,
						}
						uni.showLoading({
							title: "校验中"
						})
						setTimeout(() => {
							uni.request({
								method: 'POST',
								url: 'https://idenauthen.market.alicloudapi.com/idenAuthentication',
								header: {
									'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
									'Authorization': 'APPCODE 190d9fcb115b490db2c01737f98283aa' //APPCODE值 （'APPCODE xxxxxxx'）类似于token的形式
									// 78ef8f604d484282b1a2d14a135cc3f5
									// 190d9fcb115b490db2c01737f98283aa
								},
								dataType: 'json',
								data: ocrParams,
								success(res) {
									if( res.statusCode == '403' ) {
										that.$util.Tips({ title: '身份检验繁忙请稍后重试' });
										return;
									} 
									if( res.data.respCode == '0002' ) {
										that.$util.Tips({ title: res.data.respMessage });
										return;
									} 
									if (res.data.respCode == '0004') {
										uni.hideLoading();
										that.btnhiddle = false;
										that.$util.Tips({
											title: res.data.respMessage
										});
										return false;
									}
									if (res.data.respCode == '0008') {
										uni.hideLoading();
										that.btnhiddle = false;
										that.$util.Tips({
											title: res.data.respMessage
										});
										return false;
									}
									let ages = res.data.age;
									that.agelist.push(ages)
									let arr = that.agelist;
									let age = null;
									console.log('that.agelist', that.agelist);
									console.log('that.infoData', that.infoData);
									if (that.agelist.length == that.infoData.length) {
										console.log('666666');
										for (let k = 0; k < arr.length; k++) {
											age += Number(arr[k])
										}
										let average = Math.ceil(Number(age / arr.length));
										console.log('average', average);

										console.log('that.ageData', that.ageData)
										let list = that.ageData;
										let str = list.filter((item) => {
											console.log('item', item)
											if (average >= item.min_age && average <= item
												.max_age) {
												return item
											}
										})
										console.log('str', str);
										if (str.length == 0) {
											uni.hideLoading();
											uni.showModal({
												title: '提示',
												content: '已超过报名平均年龄',
												success: function(res) {
													if (res.confirm) {
														console.log('用户点击确定');
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
											that.btnhiddle = false;
											that.agename = '请选择年龄'
											return false;
										} else {
											that.agename = str[0].zuName;
											that.age_id = str[0].age_id;
											uni.hideLoading();
											that.btnhiddle = false;
											that.show = 1;
											if (res.data.respCode == '0000') return that.$util.Tips({
												title: res.data.respMessage
											});
											if (res.data.respCode == '0004') return that.$util.Tips({
												title: res.data.respMessage
											});
											if (res.data.respCode == '0008') return that.$util.Tips({
												title: res.data.respMessage
											});
										}
									}
									// that.agename = str[0].zuName;
									// that.age_id = str[0].age_id;
									// uni.hideLoading();
									// that.btnhiddle = false;
									// that.show = 1;
									// if( res.data.respCode == '0000' ) return that.$util.Tips({ title: res.data.respMessage });
									// if( res.data.respCode == '0004' ) return that.$util.Tips({ title: res.data.respMessage });
									// if( res.data.respCode == '0008' ) return that.$util.Tips({ title: res.data.respMessage });
								},
								fail(err) {
									uni.hideLoading();
									that.btnhiddle = false;
									console.log('err', err);
								}
							})
						}, 1000)
					}

				}

			},
			confirmbtn() {
				let that = this;
				let data = {
					huodong_id: that.huodong_id,
					infoData: JSON.stringify(that.infoData),
					zhuanye_id: that.zhuanye_id,
					age_id: that.age_id,
					title: that.title || that.infoData[0].real_name,
					source: that.source
				}
				let list = that.infoData;
				for (let i = 0; i < list.length; i++) {
					if (!list[i].real_name) return that.$util.Tips({
						title: `请填写${i+1}号选手的姓名`
					});
					if (!list[i].phone) return that.$util.Tips({
						title: `请填写${i+1}号选手的电话`
					});
					if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(list[i].phone)) return that.$util.Tips({
						title: that.$t(`请正确填写${i+1}号选手的手机号码`)
					});
					if (!list[i].id_card) return that.$util.Tips({
						title: `请填写${i+1}号选手的身份证号码`
					});
					if (!/^[1-9]\d{5}(19|20)\d{2}(0\d|1[0-2])([0-2]\d|3[0-1])\d{3}([0-9]|X)$/i.test(list[i].id_card))
						return that.$util.Tips({
							title: that.$t(`请正确填写${i+1}号选手的身份证号码`)
						});
				}
				if (!data.age_id) return that.$util.Tips({
					title: '请选择年龄组'
				})
				if (!data.zhuanye_id) return that.$util.Tips({
					title: '请选择专业'
				})
				uni.showLoading({
					title: '支付中'
				})
				baomingCreate(data).then(res => {
					let {
						orderId,
						jsConfig
					} = res.data.result;
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							uni.hideLoading();
							that.$util.Tips({
								title: '支付成功'
							}, () => {
								uni.navigateTo({
									url: '/pages/home/status'
								})
							})
						},
						fail: function() {
							uni.hideLoading();
							that.$util.Tips({
								title: '取消支付'
							}, () => {
								uni.navigateBack()
							})
							// uni.showToast({
							// 	title: that.$t(`取消支付`),
							// 	icon: 'none'
							// });
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}).catch(err => {
					uni.hideLoading();
					that.$util.Tips({
						title: err
					})
				})
			},
			zhuanyeclick(item) {
				this.zhuanyename = item.zhuanyeName;
				this.zhuanye_id = item.zhuanye_id;
				this.zhuanyeclose();
			},
			zhuanyeopen() {
				this.$refs.zhuanye.open();
			},
			zhuanyeclose() {
				this.$refs.zhuanye.close();
			},
			ageclick(item) {
				this.agename = item.zuName;
				this.age_id = item.age_id;
				this.ageclose();
			},
			ageopen() {
				this.$refs.ages.open();
			},
			ageclose() {
				this.$refs.ages.close();
			},
			getconfig() {
				let that = this;
				inletConfig({
					xiangmu_id: 1
				}).then(res => {
					that.ageData = res.data.data.ageData;
					that.zhuanyeData = res.data.data.zhuanyeData;
				})
			},
			change(e) {
				let that = this;
				console.log(e);
				this.players = e;
			},

		}
	}
</script>

<style lang="scss">
	.team {

		.verify {
			width: 690rpx;
			height: 96rpx;
			border-radius: 15rpx;
			background: #6252DF;
			color: #ffffff;
			font-size: 30rpx;
		}

		.age-nav {
			width: 100%;
			min-height: 500rpx;
			background-color: #ffffff;
		}

		.select {
			border: 2rpx solid #AFAFAF;
			width: 508rpx;
			height: 80rpx;
			padding: 0 30rpx;
		}

		.info-top {
			width: 100%;
			height: 364rpx;
		}

		.name {
			width: 160rpx;
		}

		.input {
			width: 508rpx;
			height: 80rpx;
			box-sizing: border-box;
			border: 2rpx solid #AFAFAF;
			border-radius: 12rpx;
			padding: 0 30rpx;
		}

		.uni-select {
			border: 2rpx solid #AFAFAF;
			width: 508rpx;
			height: 80rpx;
			padding: 0 30rpx;
		}

		.xuanshou {
			color: #DF3838;
			padding: 30rpx 0;
		}

		.price {
			color: #FF4040;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 50rpx;
		}

		.paybtn {
			background: #6252DF;
			width: 690rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			border-radius: 48rpx;
			color: #ffffff;
			margin: 50rpx auto;
		}

	}
</style>